<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0; padding: 0;}
        #menu{
            width: 300px;
            border: 1px solid #ccc;
            background: #eee;
            margin: 100px auto;
        }
        #menu .list1{
            background: green;
            color: #fff;
            overflow: hidden;
        }
        #menu .list1 span{
            display: block;
            cursor: pointer;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #ccc;
        }
        #menu .list1 a{
            float: left;
            background: #888;
            width: 100%;
            display: none;
        }
        #menu .active{
            background: purple;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="menu">
        <div class="list1">
            <span>第1章-认识jQuery</span>
            <a>1.1-JavaScript和JavaScript库</a>
            <a>1.2-加入jQuery</a>
            <a>1.3-编写简单jQuery代码</a>
            <a>1.4-jQuery对象和DOM对象</a>
            <a>1.5-解决jQuery和其它库的冲突</a>
            <a>1.6-jQuery开发工具和插件</a>
            <a>1.7-小结</a>
        </div>
        <div class="list1">
            <span>第2章-认识jQuery</span>
            <a>1.1-JavaScript和JavaScript库</a>
            <a>1.2-加入jQuery</a>
            <a>1.3-编写简单jQuery代码</a>
            <a>1.4-jQuery对象和DOM对象</a>
            <a>1.5-解决jQuery和其它库的冲突</a>
            <a>1.6-jQuery开发工具和插件</a>
            <a>1.7-小结</a>
        </div>
        <div class="list1">
            <span>第3章-认识jQuery</span>
            <a>1.1-JavaScript和JavaScript库</a>
            <a>1.2-加入jQuery</a>
            <a>1.3-编写简单jQuery代码</a>
            <a>1.4-jQuery对象和DOM对象</a>
            <a>1.5-解决jQuery和其它库的冲突</a>
            <a>1.6-jQuery开发工具和插件</a>
            <a>1.7-小结</a>
        </div>
    </div>
</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        //1.获取到class为list1的这个元素
        //2.给获取到的所有class为.list1的元素添加点击方法
        //3.方法里面是
/*            3.1 给当前正在点击的元素添加类名
            3.2 让当前正在点击的元素里面的a元素显示
            3.3 返回到上一个操作的元素就是.list
            3.4 让.list1上下相邻的所有元素的类名移除
            3.5 让.list1上下相邻的所有元素里面的a元素隐藏*/
        $("#menu .list1").click(function () {
           $(this).addClass("active").children("a").show().end().siblings().removeClass("active").children("a").hide();
        })
    })
</script>